<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>网页</h1>

    <button id="btn1">建立链接</button>

    <button id="btn2">发送消息到服务端</button>

    <script>
      // 定义一个 WebSocket 实例
      let socket;

      btn1.onclick = function () {
        if (socket) return;
        // 创建 WebSocket 实例
        socket = new WebSocket("ws://localhost:3000");

        // 监听服务端发来的消息
        socket.onmessage = function (event) {
          const p = document.createElement("p");
          p.innerHTML = event.data;
          document.body.appendChild(p);
        };
      };

      btn2.onclick = function () {
        // 给服务端发送消息
        socket && socket.send("Hello");
      };

      // window.onload = function () {
      //   // 1. 链接到 socket 服务，返回一个 WebSocket 实例对象
      //   //    PS: 注意协议不是 http 与 https
      //   //    ws  wss 是一种协议
      //   const ws = new WebSocket("ws://localhost:3000");
      // };
    </script>
  </body>
</html>
